<template>
  <div>
    <!-- 搜索条 -->
    <div class="search">
      <div class="search-content">
        <div class="search-input">
          <icon type="search" size="16" />
          <input
            @confirm="handleHistory"
            @input="handleInput"
            v-model="keyword"
            type="text"
            placeholder="请输入关键字"
          />
        </div>
        <button class="cancel" v-if="keyword" @click="cancelHandle">取消</button>
        <div class="search-modal" v-if="keyword">
          <div
            class="search-item"
            :key="item.goods_id"
            v-for="item in resultList"
          >{{item.goods_name}}</div>
        </div>
      </div>
    </div>
    <div class="history">
      <h4>搜索历史</h4>
      <icon @click="clearHandle" type="clear" size="16" />
    </div>
    <div class="history-list">
      <div :key="index" v-for="(item, index) in historyKey" class="history-item">{{item}}</div>
    </div>
  </div>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      // 输入的关键字
      keyword: "",
      // 搜索的结果列表
      resultList: [],
      // 控制发送请求的频率
      isLoading: false,
      // 定时任务
      timer: null,
      // 历史关键字
      historyKey: wx.getStorageSync("history") || []
    };
  },
  methods: {
    clearHandle() {
      // 清空历史缓存
      wx.clearStorageSync();
      // 页面数据也要清清裤
      this.historyKey = [];
    },
    cancelHandle() {
      // 取消搜索，就是把关键字置空
      this.keyword = "";
    },
    handleHistory() {
      // 搜索关键字回车时，记录历史
      // 向数组的前面放一项数据
      if (!this.keyword) {
        // 如果关键字是空的就终止存储
        return;
      }
      this.historyKey.unshift(this.keyword);
      // 数组的去重方式:Set数据不允许有重复，与数组的存储方式类似
      this.historyKey = [...new Set(this.historyKey)];
      // 把数据存储到本地缓存中
      mpvue.setStorageSync("history", this.historyKey);
      // 手动进行页面跳转
      mpvue.navigateTo({
        url: "/pages/search_list/main?keyword=" + this.keyword
      });
    },
    handleInput() {
      // 定时任务在延时时间范围内，如果被销毁，那么就不会再出发
      // 函数防抖：在指定时间内没有触发特定条件（输入框字符变化），那么就执行一次任务（发送一次请求）
      clearTimeout(this.timer)
      this.timer = setTimeout(async ()=>{
        let res = await request('goods/qsearch', {query: this.keyword})
        this.resultList = res.data.message
      }, 1000)
    }
  }
};
</script>

<style lang="less" scoped>
@import "./main.less";
</style>
